import { Tab, TabView } from "@rneui/themed";
import Colors from "../../util/Colors";
import {
  Animated, Dimensions,
  FlatList,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import React, { useRef, useState } from "react";
import { Input } from "@rneui/base";
import AntDesign from "react-native-vector-icons/AntDesign";
import Ionicons from "react-native-vector-icons/Ionicons";
import TabTop5Aera from "../TabTop2Aera/TabTop5Aera";
import PlayListTable from "../AllPlayList/PlayListTable";
import SongList from "../ListDetail/SongList";
import PickerCatBtn from "../AllPlayList/PickerCatBtn";

import {getQSearch} from "../../request/QQRequest";
import {getKgSearch} from "../../request/kugouRequest";
import {getMgSearch} from "../../request/miguRequest";
import {get163Search} from "../../request/neteaseRequest";
import {getKwSearch} from "../../request/kuwoRequest";
import _ from 'lodash';
import SingerList from "./SingerList";

export default function(props){
  const [index, setIndex] = React.useState(0);
  let [valueO, setValueO] = React.useState('');


  function submitSearch(){
    //console.log(valueO);
    //console.log(nowKind);
    initSearchSong(valueO,1)

  }
  const input = useRef(null);
  const [perPage,setPerPage] = useState(30);
  const [loading,setLoading] = useState(false);
  const [songs,setSongs] = useState({});
  let [pageEver,setPageEver] = useState({
    netease:{
      v:1,
      m:true
    },
    qq:{
      v:1,
      m:true
    },
    migu:{
      v:1,
      m:true
    },
    kuwo:{
      v:1,
      m:true
    },
    kugou:{
      v:1,
      m:true
    }
  });

  async function initSearchSong(keywords){
    setLoading(true);
    setPageEver({
      netease:{
        v:1,
        m:true
      },
      qq:{
        v:1,
        m:true
      },
      migu:{
        v:1,
        m:true
      },
      kuwo:{
        v:1,
        m:true
      },
      kugou:{
        v:1,
        m:true
      }
    });
    let result = {};
    result.neteSongs = await searchNetease(keywords,1);
    result.qSongs = await searchQQ(keywords,1);
    result.mgSongs = await searchMg(keywords,1);
    result.kwSongs = await searchKw(keywords,1);
    result.kgSongs = await searchKg(keywords,1);
    if(nowKind === '歌曲') {
      result.qSongs = result.qSongs.v;
      result.neteSongs = result.neteSongs.v;
      result.mgSongs = result.mgSongs.v;
      result.kgSongs = result.kgSongs.v;
      result.kwSongs = result.kwSongs.v;
    }
    //console.log('new SONG: ',result);
    setSongs(result)
    setShowKind(nowKind)
    setLoading(false)
  }

  async function searchMore(choice){
    setLoading(true);
    let newPageEver = pageEver;
    let newSongs = songs;
    switch (choice) {
      case '163':
        let page = newPageEver.netease.v + 1;
        let result = await searchNetease(valueO,page);
        newSongs.neteSongs = _.concat(songs.neteSongs,result.v);
        if(perPage * page < result.count ){
          newPageEver.netease.m = true;
          newPageEver.netease.v = newPageEver.netease.v + 1;
        }else {
          newPageEver.netease.m = false;
          newPageEver.netease.v = newPageEver.netease.v + 1;
        }
        break;
      case 'qq':
        page = newPageEver.qq.v + 1;
        result = await searchQQ(valueO,page);
        newSongs.qSongs = _.concat(songs.qSongs,result.v);
        if(perPage * page < result.count ){
          newPageEver.qq.m = true;
          newPageEver.qq.v = newPageEver.qq.v + 1;
        }else {
          newPageEver.qq.m = false;
          newPageEver.qq.v = newPageEver.qq.v + 1;
        }
        break;
      case 'migu':
        page = newPageEver.migu.v + 1;
        result = await searchMg(valueO,page);
        newSongs.mgSongs = _.concat(songs.mgSongs,result.v);
        if(perPage * page < result.count ){
          newPageEver.migu.m = true;
          newPageEver.migu.v = newPageEver.migu.v + 1;
        }else {
          newPageEver.migu.m = false;
          newPageEver.migu.v = newPageEver.migu.v + 1;
        }
        break;
      case 'kuwo':
        page = newPageEver.kuwo.v + 1;
        result = await searchKw(valueO,page);
        newSongs.kwSongs = _.concat(songs.kwSongs,result.v);
        if(perPage * page < result.count ){
          newPageEver.kuwo.m = true;
          newPageEver.kuwo.v = newPageEver.kuwo.v + 1;
        }else {
          newPageEver.kuwo.m = false;
          newPageEver.kuwo.v = newPageEver.kuwo.v + 1;
        }
        break;
      case 'kugou':
        page = newPageEver.kugou.v + 1;
        result = await searchKg(valueO,page);
        newSongs.kgSongs = _.concat(songs.kgSongs,result.v);
        if(perPage * page < result.count ){
          newPageEver.kugou.m = true;
          newPageEver.kugou.v = newPageEver.kugou.v + 1;
        }else {
          newPageEver.kugou.m = false;
          newPageEver.kugou.v = newPageEver.kugou.v + 1;
        }
        break;
    }

    setSongs(newSongs);
    setPageEver(newPageEver);
    setLoading(false)
  }

  async function searchNetease(keywords,page){
    let result = [];
    let offset = perPage * (page - 1);
    let type = '1';
    switch (nowKind) {
      case '歌曲':
        type = '1';
        break;
      case '歌手':
        type = '100';
        break;
      case '歌单':
        type = '1000';
        break;
      case '专辑':
        type = '10';
        break;
    }
    try {
      await get163Search(keywords,offset,perPage,type,(r) => {

        result = r;
      }).catch((r) => {
        result = [];
      })
    }catch (e) {
      result = [];
    }

    return result;
  }

  async function searchQQ(keywords,page){
    let result = [];
    let type = '0';
    switch (nowKind) {
      case '歌曲':
        type = '0';
        break;
      case '歌手':
        type = '9';
        break;
      case '歌单':
        type = '2';
        break;
      case '专辑':
        type = '8';
        break;
    }
    try {
      await getQSearch(keywords,page,perPage,type,(r) => {

        result = r;
      }).catch((r) => {
        result = [];
      })
    }catch (e) {
      result = [];
    }

    return result;
  }

  async function searchMg(keywords,page){
    let result = [];
    let type = 'song';
    switch (nowKind) {
      case '歌曲':
        type = 'song';
        break;
      case '歌手':
        type = 'singer';
        break;
      case '歌单':
        type = 'playlist';
        break;
      case '专辑':
        type = 'album';
        break;
    }
    try {
      await getMgSearch(keywords,page,perPage,type,(r) => {

        result = r;
      }).catch((r) => {
        result = [];
      })
    }catch (e) {
      result = [];
    }

    return result;
  }

  async function searchKw(keywords,page){
    let result = [];

    let type = '0';
    switch (nowKind) {
      case '歌曲':
        type = '0';
        break;
      case '歌手':
        type = '1';
        break;
      case '歌单':
        type = '2';
        break;
      case '专辑':
        type = '3';
        break;
    }
    try {
      await getKwSearch(keywords,page,perPage,type,(r) => {

        result = r;
      }).catch((r) => {
        result = [];
      })
    }catch (e) {
      result = [];
    }

    return result;
  }

  async function searchKg(keywords,page){
    let result = [];
    if(nowKind === '歌曲') {

      try {
        await getKgSearch(keywords, page, perPage, (r) => {

          result = r;
        }).catch((r) => {
          result = [];
        })
      }catch (e) {
        result = [];
      }

    }else {
      result = [{
        name:'酷狗只有歌曲搜素~'
      }];
    }
    return result;
  }
  function add(v){
    props.setToAddValue(v);
    props.setToAdd(true);
  }


  function renderNetease(){
    switch (showKind) {
      case '歌曲':
        return(
          <SongList loading={loading} addToList={add}  add={props.addPlayList} play={props.setCurrentMusic} navigation={props.navigation} songs={songs.neteSongs} more={pageEver.netease.m} onMore={()=>searchMore('163')} search={true}/>
        )
        break;
      case '歌手':
        return(
          <SingerList loading={loading} navigation={props.navigation} songs={songs.neteSongs} onMore={()=>searchMore('163')} search={true}/>
        )
        break;
      case '歌单':
        return(
          <PlayListTable isPlayList={true} loading={loading} navigation={props.navigation} songs={songs.neteSongs} onMore={()=>searchMore('163')} search={true}/>
        )
        break;
      case '专辑':
        return(
          <PlayListTable isAlbum={true}  loading={loading} navigation={props.navigation} songs={songs.neteSongs} onMore={()=>searchMore('163')} search={true}/>
        )
        break;
    }

  }
  function renderQQ(){
    switch (showKind) {
      case '歌曲':
        return(
          <SongList loading={loading} addToList={add}  add={props.addPlayList} more={pageEver.qq.m} onMore={()=>searchMore('qq')}  play={props.setCurrentMusic} navigation={props.navigation} songs={songs.qSongs} search={true}/>
        )
        break;
      case '歌手':
        return(
          <SingerList loading={loading} onMore={()=>searchMore('qq')} navigation={props.navigation} songs={songs.qSongs} search={true}/>
        )
        break;
      case '歌单':
        return(
          <PlayListTable  isPlayList={true} loading={loading} onMore={()=>searchMore('qq')} navigation={props.navigation} songs={songs.qSongs} search={true}/>
        )
        break;
      case '专辑':
        return(
          <PlayListTable isAlbum={true}  loading={loading} onMore={()=>searchMore('qq')} navigation={props.navigation} songs={songs.qSongs} search={true}/>
        )
        break;
    }

  }
  function renderMiGu(){
    switch (showKind) {
      case '歌曲':
        return(
          <SongList loading={loading} addToList={add}  add={props.addPlayList} more={pageEver.migu.m} onMore={()=>searchMore('migu')}  play={props.setCurrentMusic} navigation={props.navigation} songs={songs.mgSongs} search={true}/>
        )
        break;
      case '歌手':
        return(
          <SingerList loading={loading} onMore={()=>searchMore('migu')}  navigation={props.navigation} songs={songs.mgSongs} search={true}/>
        )
        break;
      case '歌单':
        return(
          <PlayListTable  isPlayList={true} loading={loading} onMore={()=>searchMore('migu')}  navigation={props.navigation} songs={songs.mgSongs} search={true}/>
        )
        break;
      case '专辑':
        return(
          <PlayListTable isAlbum={true}  loading={loading} onMore={()=>searchMore('migu')}  navigation={props.navigation} songs={songs.mgSongs} search={true}/>
        )
        break;
    }

  }
  function renderKuWo(){
    switch (showKind) {
      case '歌曲':
        return(
          <SongList loading={loading} addToList={add}  add={props.addPlayList} more={pageEver.kuwo.m} onMore={()=>searchMore('kuwo')}  play={props.setCurrentMusic} navigation={props.navigation} songs={songs.kwSongs} search={true}/>
        )
        break;
      case '歌手':
        return(
          <SingerList loading={loading} onMore={()=>searchMore('kuwo')}  navigation={props.navigation} songs={songs.kwSongs} search={true}/>
        )
        break;
      case '歌单':
        return(
          <PlayListTable isPlayList={true}  loading={loading} onMore={()=>searchMore('kuwo')}  navigation={props.navigation} songs={songs.kwSongs} search={true}/>
        )
        break;
      case '专辑':
        return(
          <PlayListTable isAlbum={true}  loading={loading} onMore={()=>searchMore('kuwo')}  navigation={props.navigation} songs={songs.kwSongs} search={true}/>
        )
        break;
    }

  }
  function renderKuGou(){
    switch (showKind) {
      case '歌曲':
        return(
          <SongList loading={loading} addToList={add}  add={props.addPlayList} more={pageEver.kugou.m} onMore={()=>searchMore('kugou')}  play={props.setCurrentMusic} navigation={props.navigation} songs={songs.kgSongs} search={true}/>
        )
        break;
      case '歌手':
        return(
          <SingerList loading={loading}  onMore={()=>searchMore('kugou')}  navigation={props.navigation} songs={songs.kgSongs} search={true}/>
        )
        break;
      case '歌单':
        return(
          <PlayListTable isPlayList={true}  loading={loading}  onMore={()=>searchMore('kugou')}  navigation={props.navigation} songs={songs.kgSongs} search={true}/>
        )
        break;
      case '专辑':
        return(
          <PlayListTable isAlbum={true} loading={loading}  onMore={()=>searchMore('kugou')}  navigation={props.navigation} songs={songs.kgSongs} search={true}/>
        )
        break;
    }

  }

  const kind = ['歌曲','歌手','歌单','专辑'];

  const [nowKind,setNowKind] = useState('歌曲');
  const [showKind,setShowKind] = useState('歌曲');
  const [showList,setShowList] = useState(false);
  const showListFun = (v) => {
    //console.log(v);
    if(v){
      setNowKind(v);
    }
    if(showList){
      setShowList(false);
    }else {
      setShowList(true);
    }
  };
  return(
    <View style={{
      width:width,
      height:height - 55
    }}>

      <View style={styles.item}>
        <AntDesign
          name={'arrowleft'}
          size={24}
          style={styles.icon}
          color={'white'}
          onPress={() => props.navigation.pop()}
        />
        <View style={styles.layoutText}>

            <TextInput
              style={styles.itemTitle} numberOfLines={1}
              editable={true}
              autoFocus={true}
              onChangeText={value => (setValueO(value))}
              onSubmitEditing={submitSearch}
            />

        </View>
        <View
          style={
              styles.rightNone}>

        </View>

      </View>
      <Animated.View
        style={[
          styles.rightListText,
          {
            backgroundColor:'rgba(255,255,255,0)',
            height: showList?185:50, // Bind opacity to animated value
            zIndex:99999
          }
        ]}
      >
        <PickerCatBtn onPress={() => showListFun()} style={{marginTop:4,marginLeft: 0,marginRight:0,backgroundColor: 'rgba(238,238,238,0.02)',}} textStyle={{fontSize: 15,color: showList?'black':'white',}}  text={(nowKind+' >')}/>
        {
          kind.map((r) => {
            if(r !== nowKind)
              return(
                <PickerCatBtn onPress={()=>showListFun(r)} style={{marginTop:4,marginLeft: 0,marginRight:0,backgroundColor: 'rgba(238,238,238,0.02)',}} textStyle={{fontSize: 15,color: showList?'black':'white'}}  text={r}/>
              )
          })
        }

      </Animated.View>
      <TabTop5Aera
        renderNetease={renderNetease}
        renderQQ={renderQQ}
        renderMiGu={renderMiGu}
        renderKuWo={renderKuWo}
        renderKuGou={renderKuGou}

      ></TabTop5Aera>
    </View>

  )
}
const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
  item: {
    // backgroundColor:'rgba(35,35,35,0.37)',
    backgroundColor: Colors.colorPrimary,
    height: 50,
    flexDirection: 'row',
    justifyContent: 'center', // 子元素沿主轴的对齐方式
    alignItems: 'center',


  },
  layoutText: {
    flex: 10,
    flexDirection: 'column',
    justifyContent: 'flex-end', // 子元素沿主轴的对齐方式
    borderBottomColor:'grey',
    borderBottomWidth:1,
    marginLeft:8,
    overflow: 'hidden',
    marginBottom:5,

  },
  itemTitle: {
    marginBottom:-10,
    fontSize: 20,
    color: '#ffffff'
  },
  icon: {
    flex:1,
    padding: 8,
  },
  rightNone:{
    flex:3
  },
  rightListText:{
    overflow:'hidden',
    width:70,
    position:'absolute',
    right:10

  }
})
